<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {
            background-color: #EDEDED;
        }

        section {
            float: left;
            width: 60%;
            height: 34rem;
            display: inline-block;
            overflow: hidden;
        }

        section:hover {
            overflow-y: auto;
        }

        .content-area-left {
            margin: 0.625rem 0 1.5rem 0.625rem;
            color: #808080;
            background-color: white;
            width: 98%;
            min-height: 11rem;
            max-height: 15rem;
            border-radius: 1.875rem
        }

        .left-header {
            padding-top: 0.625rem;
        }

        .left-header img {
            display: inline-block;
            margin-left: 0.625rem;
            width: 3.125rem;
            height: 3.125rem;
            border-radius: 3.125rem;
        }

        .img-span {
            display: inline-block;
        }

        .left-header span {
            padding: 0 0 0.625rem 0;
            line-height: 1.5625rem;
        }

        .left-section {
            width: 96%;
            min-height: 1.875rem;
            max-height: 4rem;
            word-wrap: break-word;
            word-break: break-all;
            overflow: auto;
            color: #000000;
            margin: 0.625rem 0 0.625rem 0.625rem;
        }

        .left-footer i {
            font-size: 1.125rem;
            padding-left: 0.625rem;
        }

        .left-footer i:nth-last-child {
            float: right;
        }

        .movent {
            font-size: 66px;
            color: #ccc;
            cursor: pointer;
        }

        .cs {
            color: aqua;
        }

        .content-area-right {
            display: inline-block;
            width: 40%;
            height: 34rem;
        }

        .right-up {
            margin: 3.125rem auto;
            width: 18.75rem;
            height: 4rem;
        }

        .leftdiv {
            text-align: center;
            float: left;
            width: 46%;
            height: 100%;
            background-color: #fab600;
            border-radius: 3.125rem
        }

        .rightdiv {
            text-align: center;
            float: right;
            width: 46%;
            height: 100%;
            background-color: #fab600;
            border-radius: 3.125rem;
            padding-top: -3.125rem;
        }

        .centerdiv {
            display: inline-block;
            width: 1%;
            height: 100%;
            background-color: #A9A9A9;
            margin-left: 4%;
        }

        .leftdiv a,
        .rightdiv a {
            text-decoration: none;
        }

        .leftdiv i,
        .rightdiv i {
            font-size: 2.8125rem
        }

        .leftdiv span,
        .rightdiv span {
            font-size: 1.125rem;
        }

        .btn {
            color: white;
        }

        .right-down {
            margin: 0 auto;
            width: 60%;
            height: 70%;
            background-color: white;
            border-radius: 3.125rem;
        }

        .down-title {
            padding: 1.875rem;
            font-size: 1.5rem;
            font-weight: bold;
            color: darkturquoise;
        }

        .right-down ul {
            margin-top: -1rem;
        }

        .right-down ul li {
            max-width: 11.25rem;
            list-style: none;
            line-height: 3rem;
            overflow: hidden;
        }

        .li-i {
            margin: -2.5rem 1.25rem 0 0;
            float: right;
            padding: 0.3125rem 0.7rem 0.3125rem 0.5rem;
            background-color: orange;
        }
    </style>
</head>
<body>
<div data-th-include="febs/views/travel/header"></div>
<div id="content-area">
    <section>
        <div th:each="communication:${communications}">
            <div class="content-area-left">
                <div class="left-header">
                    <img alt="头像" th:src="@{/febs/images/avatar/{imgName}(imgName=${communication.image})}">
                    <div class="img-span">
                        <span style="color: #000000;font-weight: bold;" th:text="${communication.code}"></span><br/>
                        <span>The signature</span>
                    </div>
                </div>
                <span style="font-size: 0.75rem;padding-left: 0.625rem;">Time for comments</span>
                <div class="left-section"><span th:text="${communication.message}"></span></div>
                <div class="left-footer">
                    <i class="movent">&#10084; like</i>
                    <i class="movent">&#9733; collection</i>
                    <i class="movent">&#10173; repost</i>
                    <div style="display: initial;float: right;margin-right: 1.875rem;"><i class="movent">&#9993;
                        comments</i></div>
                </div>
            </div>
        </div>
    </section>
    <div class="content-area-right">
        <div class="right-up">
            <div class="leftdiv">
                <a href=""><i class="btn">&#10162; <span>share</span></i></a>
            </div>
            <div class="centerdiv"></div>
            <div class="rightdiv">
                <a href=""><i class="btn">&#10226; <span>refrech</span></i></a>
            </div>
        </div>
        <div class="right-down">
            <div class="down-title">
                <span>Hot posts</span>
            </div>
            <ul th:each="communication,userStat:${communicationsCount}" >
                <li th:text="${communication.message}"></li>
                <i class="li-i" th:text="${userStat.count}"></i>
            </ul>
        </div>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"/>
<script th:src="@{/layui/layui.js}"></script>
<script data-th-inline="none" type="text/javascript">
    $(function () {
        $(".movent").click(function () {
            $(this).toggleClass('cs');
        })
    });
    layui.use(['jquery', 'form', 'febs'], function () {
        var $ = layui.jquery,
            febs = layui.febs,
            $view = $('#febs-user-profile');
        $view.on('click', '#user-profile img', function () {
            febs.modal.view('点击更换', 'user/avatar', {
                area: $(window).width() <= 750 ? '90%' : '650px',
                offset: '100px'
            });
        });

        $view.on('click', '#submit', function () {
            $view.find('#submit-form').trigger('click');
        });

        function initSettings() {
            form.val("system-setting-form", _currentData);
        }

        form.on('submit(system-setting-form-submit)', function (data) {
            if (febs.nativeEqual(data.field, _currentData)) {
                febs.alert.warn('数据未作任何修改');
                return false;
            }
            febs.post(ctx + 'user/theme/update', data.field, function () {
                _currentData = data.field;
                febs.modal.confirm('修改成功', '是否马上刷新页面生效？', function () {
                    window.location.reload();
                });
            });
            return false;
        });
    })
</script>
</body>
</html>
